<template>
	<view class="page-container">
		<up-navbar :title="'景点门票'" fixed safeAreaInsetTop @left-click="pageBack"></up-navbar>

		<view
			class="content-wrap"
			:style="{
				top: `calc(${commonStore.statusBarHeight}px + ${commonStore.navbarHeight}px)`,
				bottom: `calc(${commonStore.safeAreaBottomHeight}px)`,
			}"
		>
			<view class="search-area flex-a">
				<up-search
					v-model="searchKey"
					@search="doSearch"
					placeholder="搜索景点名称关键字"
					:show-action="false"
					:placeholderColor="'#C9CDD4'"
					:input-style="{
						fontSize: '24rpx',
					}"
				></up-search>
				<view class="flex-col flex-c plr-24" v-if="viewMode === 0" @click="handleChangeViewMode(1)">
					<up-image width="16" height="16" :src="imgBaseUrl + 'switch-map.png'"></up-image>
					<text>地图模式</text>
				</view>
				<view class="flex-col flex-c plr-24" v-if="viewMode === 1" @click="handleChangeViewMode(0)">
					<up-image width="16" height="16" :src="imgBaseUrl + 'switch-list.png'"></up-image>
					<text>列表模式</text>
				</view>
			</view>
			<!--搜索组件-->
			<zjy-filters :data="filterData" @close="filterClose" />

			<view class="list-container pt-50 pb-24" v-if="viewMode === 0">
				<scroll-view
					:scroll-y="true"
					class="plr-24"
					:style="{
						height: scrollViewHeight,
					}"
				>
					<view class="swiper-container" v-if="swiperList && swiperList.length > 0">
						<up-swiper
							height="372rpx"
							:current="current"
							@change="onSwiperChange"
							:list="swiperList"
							:key-name="'cover_url'"
							radius="24rpx"
							:autoplay="autoplay"
							@click="swiperToScenicDetail"
						>
							<template #indicator>
								<view class="indicator">
									<view
										class="indicator__dot"
										v-for="(item, index) in swiperList"
										:key="index"
										:class="[index === current && 'indicator__dot--active']"
										@click="onSwiperChange({ current: index })"
									>
										<view class="dot-mask"></view>
										<image class="dot-img" :src="swiperList[index].cover_url"></image>
										<template v-if="index === current">
											<view class="dot-text">TOP{{ index + 1 }}</view>
										</template>
									</view>
								</view>
							</template>
						</up-swiper>
						<image
							class="view-more"
							:src="imgBaseUrl + 'view-more.png'"
							@click="pageToRankScenic(rankData.id)"
						></image>
					</view>
					<template v-if="listData && listData.length > 0">
						<view v-for="(item, index) in listData" :key="index">
							<resort-list-card :data="item"></resort-list-card>
						</view>
						<view style="height: 16rpx; width: 100%"></view>
					</template>
					<zjy-empty emptyText="暂无数据" v-else pdTop="120"></zjy-empty>
				</scroll-view>
			</view>

			<view class="list-container map-content" v-if="viewMode === 1">
				<map
					id="map"
					class="map"
					:latitude="centerLatitude"
					:longitude="centerLongitude"
					:markers="mapCovers"
					style="width: 100%; height: 100%"
					:include-points="mapCovers"
					:enable-rotate="true"
					:show-location="true"
					@markertap="handleMarkerTap"
					@callouttap="calloutTap"
					ref="map"
				></map>
				<view class="map-bottom">
					<swiper
						class="swiper-con"
						:autoplay="false"
						circular="true"
						next-margin="30px"
						:current="swiperMapIndex"
						@change="changeSwiperMapIndex"
					>
						<swiper-item
							v-for="(item, index) in listData"
							:key="index"
							@click="pageToScenicDetail(item.id)"
						>
							<swiper-card :data="item" class="swiper-item"></swiper-card>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { onHide, onLoad, onShow } from "@dcloudio/uni-app"
import useCommonStore from "@/store/common"
import { DistanceList, ScenicLevels, SortList } from "@/components/zjy-filters/constant"
import zjyFilters from "@/components/zjy-filters/index.vue"
import ResortListCard from "@/pages/hy/components/resort-list-card.vue"
import { pageBack, pageToRankScenic, pageToScenicDetail } from "@/utils/page-redirect"
import { $getScenicList } from "@/api/hy/scenic"
import { $getHotListRecommended } from "@/api/feed/rank"
import SwiperCard from "@/pages/hy/scenic/components/swiper-card.vue"
import { debounce } from "@/utils/debounce"
import { getAttributeGroupList, getPublicPageWithResort } from "@/components/zjy-filters/service"
import { ProductTypes } from "@/constants/common"
import { getLocation } from "@/utils/location"
import useUserStore from "@/store/user"

const imgBaseUrl = inject("imgBaseUrl")
const userStore = useUserStore()
const commonStore = useCommonStore()
const scrollViewHeight = `calc(100vh - ${
	commonStore.statusBarHeight +
	commonStore.navbarHeight +
	commonStore.safeAreaBottomHeight +
	commonStore.tabbarHeight +
	60
}px)`

const swiperMapIndex = ref(0)
const listData = ref([])
const searchKey = ref("")
const searchParams = ref({})
const defaultColor = "#1953A3"
const activeColor = "#FEE038"
const centerLongitude = ref("")
const centerLatitude = ref("")
const autoplay = ref(true)
const userLongitude = ref("")
const userLatitude = ref("")
const mapCovers = ref([])

// 页面模式
const viewMode = ref(0)
const handleChangeViewMode = debounce((mode: number) => {
	if (mode === viewMode.value) return
	viewMode.value = mode
}, 500)

// 列表数据
const getListData = () => {
	let params = Object.assign({}, searchParams.value, {
		searchKey: searchKey.value,
	})
	params.latitude = userLatitude.value
	params.longitude = userLongitude.value
	$getScenicList(params).then((res: any) => {
		listData.value = res.list
		if (res.list.length > 0) {
			mapCovers.value = res.list.map((item: any, index: number) => {
				return {
					id: index,
					isActive: false,
					latitude: item.latitude,
					longitude: item.longitude,
					width: 1,
					height: 1,
					iconPath: imgBaseUrl + "location-mark.png",
					rotate: item.rotate || 0,
					callout: {
						content: item.name,
						borderRadius: 60,
						display: "ALWAYS",
						padding: 7,
						color: "#fff",
						fontSize: 15,
						bgColor: defaultColor,
					},
				}
			})
			centerLatitude.value = res.list[0].latitude
			centerLongitude.value = res.list[0].longitude

			handleMapActive()
		} else {
			mapCovers.value = []
		}
	})
}
const doSearch = () => {
	getListData()
}

// 高亮地图
const handleMapActive = () => {
	const activeItems = mapCovers.value.filter((item: any) => item.isActive)
	activeItems.forEach((item: any) => {
		item.isActive = false
		item.iconPath = imgBaseUrl + "location-mark.png"
		item.callout.color = "#fff"
		item.callout.bgColor = defaultColor
	})
	mapCovers.value[swiperMapIndex.value].isActive = true
	mapCovers.value[swiperMapIndex.value].iconPath = imgBaseUrl + "location-mark-active.png"
	mapCovers.value[swiperMapIndex.value].callout.color = "#1D2129"
	mapCovers.value[swiperMapIndex.value].callout.bgColor = activeColor

	centerLatitude.value = mapCovers.value[swiperMapIndex.value].latitude
	centerLongitude.value = mapCovers.value[swiperMapIndex.value].longitude
}
// 切换swiper
const changeSwiperMapIndex = (e: any) => {
	swiperMapIndex.value = e.target.current
	handleMapActive()
}
const handleMarkerTap = (e: any) => {
	console.log("click a marker", e)
}
// 点击气泡callout
const calloutTap = (e: any) => {
	console.log("click callout", e)
	swiperMapIndex.value = e.target.markerId
	handleMapActive()
}

//#region 筛选
const filterData = ref<any[]>([])
const filterClose = (data: any) => {
	searchParams.value = data
	getListData()
}
//#endregion

const initFilter = async () => {
	let areaResorts: any = await getPublicPageWithResort()
	let attrList: any = await getAttributeGroupList({ type: ProductTypes.TICKET })
	filterData.value = [
		{
			title: "全部景区",
			key: "resort_id_str",
			type: "scenic",
			value: areaResorts[0].resorts[0].id,
			data: areaResorts,
		},
		{
			title: "综合排序",
			key: "ordering_type",
			type: "single",
			value: SortList[0].id,
			data: SortList,
		},
		{
			title: "位置距离",
			key: "max_distance_in_meter",
			type: "single",
			value: DistanceList[0].id,
			data: DistanceList,
		},
		{
			title: "筛选",
			key: "attribute_id_str",
			type: "group",
			data: ScenicLevels.concat(attrList),
		},
	]
}
onLoad(() => {
	initFilter()

	getLocation(false).then(
		({ longitude, latitude }) => {
			userStore.updateLocation({ longitude, latitude })
			// 页面逻辑处理
			userLongitude.value = longitude.toString()
			userLatitude.value = latitude.toString()
			getListData()
		},
		() => {
			// 用户取消授权 uni.showToast({ title: "获取位置失败，请允许使用位置信息", icon: "none" });
			getListData()
		}
	)

	$getHotListRecommended({ type: 10 }).then((res: any) => {
		if (res.items.length > 0) {
			rankData.value = res
			swiperList.value = res.items.slice(0, 3)
		}
	})
})

// 轮播图切换
const rankData = ref({})
const swiperList = ref<any>([])
const current = ref(0)
const onSwiperChange = (e: any) => {
	current.value = e.current
}
const swiperToScenicDetail = (index: number) => {
	pageToScenicDetail(swiperList.value[index].id)
}
onShow(() => {
	autoplay.value = true
})
onHide(() => {
	autoplay.value = false
})
</script>

<style scoped lang="scss">
.page-container {
	.content-wrap {
		position: absolute;
		left: 0;
		right: 0;
		overflow: hidden;
	}

	.search-area {
		background-color: #fff;
		padding: 12rpx 24rpx;
		gap: 24rpx;
	}

	.list-container {
		flex: 1;
		overflow-y: hidden;

		.swiper-container {
			position: relative;
			.view-more {
				position: absolute;
				right: -1rpx;
				bottom: -1rpx;
				width: 280rpx;
				height: 100rpx;
			}

			.hot-recommended {
				position: absolute;
				left: 24rpx;
				top: 24rpx;
				z-index: 12;
			}

			.hot-title {
				position: absolute;
				left: 24rpx;
				top: 120rpx;
				z-index: 12;
				font-size: 44rpx;
				font-weight: 600;
				color: #ffffff;
				text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.4);
			}

			.hot-text {
				position: absolute;
				left: 24rpx;
				top: 184rpx;
				z-index: 12;
				font-size: 24rpx;
				color: #ffffff;
			}
		}

		:deep(.u-swiper__indicator) {
			width: 100%;
			bottom: 0;
		}

		.indicator {
			width: 100%;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			background: rgba(0, 0, 0, 0.2);
			backdrop-filter: blur(10px);
			position: relative;

			&__dot {
				width: 52rpx;
				height: 52rpx;
				border-radius: 50%;
				background-color: rgba(255, 255, 255, 0.35);
				margin: 0 12rpx;
				transition: width 0.3s, height 0.3s, border-radius 0.3s, background-color 0.3s;
				display: flex;
				justify-content: center;
				position: relative;
				overflow: clip;

				.dot-mask {
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					height: 100%;
					background: linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4));
					z-index: 2;
					&:before {
						content: "";
						position: absolute;
						left: calc(50% - 9rpx);
						top: -11rpx;
						width: 18rpx;
						height: 11rpx;
						background: url(#{$imgBaseUrl}arrow-yellow.png) no-repeat center center / cover;
					}
				}

				.dot-img {
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					height: 100%;
					z-index: 1;
					border-radius: 50%;
				}

				&--active {
					width: 128rpx;
					border-radius: 32rpx;
					border: 1.5px solid #fee038;
					overflow: initial;

					.dot-mask {
						border-radius: 24rpx;
					}

					.dot-text {
						position: relative;
						z-index: 3;
						font-family: "Helvetica Neue", Arial, Roboto, sans-serif;
						transform: skew(-5deg);
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 28rpx;
						font-weight: bold;
						color: #ffffff;
					}
				}
			}
		}

		.indicator-num {
			padding: 2px 0;
			background-color: rgba(0, 0, 0, 0.35);
			border-radius: 100px;
			width: 35px;
			@include flex;
			justify-content: center;

			&__text {
				color: #ffffff;
				font-size: 12px;
			}
		}
	}

	.map-content {
		height: 100%;
		position: relative;

		.map-bottom {
			position: absolute;
			z-index: 2;
			left: 0;
			right: 0;
			bottom: calc(180rpx + env(safe-area-inset-bottom));
			display: flex;
			gap: 20rpx;
			padding: 0 0 0 24rpx;
			height: 274rpx;
			width: 100%;

			.swiper-con {
				width: 100%;
				.swiper-item {
					/* #ifndef APP-NVUE */
					display: flex;
					/* #endif */
					flex-direction: column;
					justify-content: center;
					align-items: center;
					color: #fff;
					margin-right: 24rpx;
				}
			}
		}
	}
}
</style>
